<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>DOM Test</title>
    <style>
        p { line-height: 2; margin-top: 2em; }
        p:first-child { margin-top: .5em; }
        .modal {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,.6);
            display: none;
        }

        .modal__content {
            background: white;
            padding: 10px;
            border-radius: 10px;
            position: absolute;
            top: 20%;
            left: 10%;
            width: 80%;
            box-sizing: border-box;
        }

        .modal__hd {
            border-bottom: 1px solid #ccc;
            padding: 4px 0;
        }

        .modal__bd {
            max-height: 250px;
            overflow-y: scroll;
        }

        .modal__ft {
            padding: 4px 0;
            text-align: center;
            border-top: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <main>
        <h1>DOM TEST</h1>
        <p>1. Consectetur repellat incidunt dolor error culpa? Vero cupiditate nam cumque aperiam voluptatibus? Eius laborum explicabo alias soluta aspernatur. Nesciunt quo ex numquam cupiditate impedit aspernatur Suscipit animi possimus ipsum ea?</p>
        <p>2. Amet necessitatibus magnam labore voluptatem esse dolorum natus, voluptatem in dolores Repudiandae voluptate quaerat tempora autem minus, a? Quo soluta similique ullam esse dolorem? Repellat facere blanditiis tempore quis iste</p>
        <p>3. Consectetur repellat incidunt dolor error culpa? Vero cupiditate nam cumque aperiam voluptatibus? Eius laborum explicabo alias soluta aspernatur. Nesciunt quo ex numquam cupiditate impedit aspernatur Suscipit animi possimus ipsum ea?</p>
        <p>4. Consectetur repellat incidunt dolor error culpa? Vero cupiditate nam cumque aperiam voluptatibus? Eius laborum explicabo alias soluta aspernatur. Nesciunt quo ex numquam cupiditate impedit aspernatur Suscipit animi possimus ipsum ea?</p>
        <p>5. Consectetur repellat incidunt dolor error culpa? Vero cupiditate nam cumque aperiam voluptatibus? Eius laborum explicabo alias soluta aspernatur. Nesciunt quo ex numquam cupiditate impedit aspernatur Suscipit animi possimus ipsum ea?</p>
        <p>6. onsectetur repellat incidunt dolor error culpa? Vero cupiditate nam cumque aperiam voluptatibus? Eius laborum explicabo alias soluta aspernatur. Nesciunt quo ex numquam cupiditate impedit aspernatur Suscipit animi possimus ipsum ea?</p>
        <p>7. Consectetur repellat incidunt dolor error culpa? Vero cupiditate nam cumque aperiam voluptatibus? Eius laborum explicabo alias soluta aspernatur. Nesciunt quo ex numquam cupiditate impedit aspernatur Suscipit animi possimus ipsum ea?</p>
        <p>8. Consectetur repellat incidunt dolor error culpa? Vero cupiditate nam cumque aperiam voluptatibus? Eius laborum explicabo alias soluta aspernatur. Nesciunt quo ex numquam cupiditate impedit aspernatur Suscipit animi possimus ipsum ea?</p>
        <p>9. Amet necessitatibus magnam labore voluptatem esse dolorum natus, voluptatem in dolores Repudiandae voluptate quaerat tempora autem minus, a? Quo soluta similique ullam esse dolorem? Repellat facere blanditiis tempore quis iste</p>
    </main>
    <div class="modal">
        <div class="modal__content">
            <div class="modal__hd">标题</div>
            <div class="modal__bd">
                <p>1. Consectetur repellat incidunt dolor error culpa? Vero cupiditate nam cumque aperiam voluptatibus? Eius laborum explicabo alias soluta aspernatur. Nesciunt quo ex numquam cupiditate impedit aspernatur Suscipit animi possimus ipsum ea?</p>
                <p>2. Amet necessitatibus magnam labore voluptatem esse dolorum natus, voluptatem in dolores Repudiandae voluptate quaerat tempora autem minus, a? Quo soluta similique ullam esse dolorem? Repellat facere blanditiis tempore quis iste</p>
                <p>3. Consectetur repellat incidunt dolor error culpa? Vero cupiditate nam cumque aperiam voluptatibus? Eius laborum explicabo alias soluta aspernatur. Nesciunt quo ex numquam cupiditate impedit aspernatur Suscipit animi possimus ipsum ea?</p>
                <p>4. Consectetur repellat incidunt dolor error culpa? Vero cupiditate nam cumque aperiam voluptatibus? Eius laborum explicabo alias soluta aspernatur. Nesciunt quo ex numquam cupiditate impedit aspernatur Suscipit animi possimus ipsum ea?</p>
                <p>5. Consectetur repellat incidunt dolor error culpa? Vero cupiditate nam cumque aperiam voluptatibus? Eius laborum explicabo alias soluta aspernatur. Nesciunt quo ex numquam cupiditate impedit aspernatur Suscipit animi possimus ipsum ea?</p>
                <p>6. onsectetur repellat incidunt dolor error culpa? Vero cupiditate nam cumque aperiam voluptatibus? Eius laborum explicabo alias soluta aspernatur. Nesciunt quo ex numquam cupiditate impedit aspernatur Suscipit animi possimus ipsum ea?</p>
                <p>7. Consectetur repellat incidunt dolor error culpa? Vero cupiditate nam cumque aperiam voluptatibus? Eius laborum explicabo alias soluta aspernatur. Nesciunt quo ex numquam cupiditate impedit aspernatur Suscipit animi possimus ipsum ea?</p>
                <p>8. Consectetur repellat incidunt dolor error culpa? Vero cupiditate nam cumque aperiam voluptatibus? Eius laborum explicabo alias soluta aspernatur. Nesciunt quo ex numquam cupiditate impedit aspernatur Suscipit animi possimus ipsum ea?</p>
                <p>9. Amet necessitatibus magnam labore voluptatem esse dolorum natus, voluptatem in dolores Repudiandae voluptate quaerat tempora autem minus, a? Quo soluta similique ullam esse dolorem? Repellat facere blanditiis tempore quis iste</p>
            </div>
            <div class="modal__ft">
                <div class="button close-button">关闭</div>
            </div>
        </div>
    </div>
    <script type="module">
        import {
            $,
            lockPageYScroll,
            unlockPageYScroll,
        } from '../src/dom.js';

        document.addEventListener('click', onClick);

        function onClick(e) {
            if (e.target === $('.close-button')) {
                closePop();
            } else {
                showPop();
            }
        }

        function showPop() {
            $('.modal').style.display = 'block';
            lockPageYScroll();
        }

        function closePop() {
            $('.modal').style.display = 'none';
            unlockPageYScroll();
        }
    </script>
</body>
</html>
